<template>

  <el-dialog :visible.sync="dialogFormVisible" :title="title">
    <el-form :model="video">
      <el-form-item :label-width="formLabelWidth" label="课时标题">
        <el-input v-model="video.title" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="课时排序">
        <el-input-number v-model="video.sort" :min="0" />
      </el-form-item>
      <!-- 上传视频 -->
      <el-form-item :label-width="formLabelWidth" label="视频上传">
        <el-upload
          ref="upload"
          :on-success="uploadSuccessHandle"
          :auto-upload="false"
          :action="UploadURL"
          class="upload-demo">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过500Mb</div>
        </el-upload>
      </el-form-item>
      <!-- 是否免费 -->
      <el-form-item :label-width="formLabelWidth" label="是否免费">
        <el-radio v-model="video.free" :label="1">免费</el-radio>
        <el-radio v-model="video.free" :label="0">默认</el-radio>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit1">确 定</el-button>
    </div>
  </el-dialog>

</template>
<script>
import videoApi from '@/api/video'
export default {
  data() {
    return {
      title: '新增课时',
      dialogFormVisible: false,
      formLabelWidth: '80px',
      video: {
        chapterId: '',
        title: '',
        vid: ''
      },
      UploadURL: 'http://localhost:9110/admin/vod/upload'

    }
  },
  methods: {
    // 取消提交章节的信息，重置章节信息，并将标签的可视化变成false
    close() {
      this.video = {}
      this.dialogFormVisible = false
    },
    // 提交章节的信息到数据库
    submit1() {
      // 调用js封装的方法提交数据
      // 提交课时的信息，需要绑定章节及课程的id信息
      this.video.courseId = this.$parent.$parent.courseId
      if (this.video.id) {
        this.update()
      } else {
        this.save()
      }
      this.close()
    },
    // 更新课时时调用的方法
    open(videoId) {
      this.dialogFormVisible = true
      this.title = '修改课时'
      videoApi.getVideo(videoId).then(r => {
        this.video = r.data.item
      })
    },
    // 添加课时时调用的方法
    addVideo(chapterId) {
      this.video.chapterId = chapterId
      this.dialogFormVisible = true
    },
    update() {
      videoApi.editVideo(this.video).then(r => {
        this.$message.success('更新' + this.video.title + '课时成功')
        this.$parent.getChapterAndVideo()
      })
    },
    save() {
      videoApi.addVideo(this.video).then(r => {
        this.$message.success('添加' + this.video.title + '课时成功')
        this.$parent.getChapterAndVideo()
      })
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    // 上传成功的回调事件
    uploadSuccessHandle(r, file) {
      this.video.videoSourceId = r.data.maps.vid
      this.video.videoOriginalName = file.name
      this.$message.success('视频上传成功')
    }

  }
}
</script>
